<template>
  <div>
    <el-button @click="dialogFormVisible = true">
      编辑
    </el-button>
    <!-- 添加店铺 -->
    <el-dialog title="添加店铺" :visible.sync="dialogFormVisible">
      <el-avatar
        :size="80"
        class="avatar"
        src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"
      ></el-avatar>
      <el-form :model="form">
        <el-form-item label="店铺名称" :label-width="formLabelWidth">
          <el-input v-model="form.name" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="店铺企业" :label-width="formLabelWidth">
          <el-input v-model="form.qy" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="购买渠道" :label-width="formLabelWidth">
          <el-select v-model="form.region" placeholder="请选择活动区域">
            <el-option label="区域一" value="shanghai"></el-option>
            <el-option label="区域二" value="beijing"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="类目" :label-width="formLabelWidth">
          <el-select v-model="form.cate" placeholder="请选择活动区域">
            <el-option label="区域一" value="qyu"></el-option>
            <el-option label="区域二" value="qyu1"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="数量" :label-width="formLabelWidth">
          <el-select v-model="form.num" placeholder="请选择活动区域">
            <el-option label="区域一" value="shanghai"></el-option>
            <el-option label="区域二" value="beijing"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="dialogFormVisible = false"
          >确认添加</el-button
        >
        <el-button @click="dialogFormVisible = false">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
export default {
  data() {
    return {
      formLabelWidth: "180px",
      dialogFormVisible: false,
      form: {
        name: "",
        region: "",
        num: "",
        cate: "",
        qy: "",
      },
    };
  },
  mounted() {},
  methods: {},
};
</script>
<style lang="less" scoped>
.avatar {
  margin: 30px;
  display: flex;
  justify-content: center;
  margin: auto;
}
// .dialog-footer {
// }
</style>
